<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            margin: auto;
            
            width: 130px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .item {
            width: 60px;
            height: 100px;
            border: 1px solid red;
            margin-top:10px ;
            display: flex;
            flex-direction: column;
            font-size: 1px;

        }
        .item img{
            width: 50px;
            height: 50px;
            margin: auto;
        }
        
    </style>
</head>

<body>
    <div id="root">
            <h1>当前商品是：{{localid}}</h1>
            <sgitem :goods="goods"  @itemid="itemid"></sgitem>
        
    </div>

    <template id="sp">
        <div class="container">

            <div class="item" 
            v-for="val of lk" :key="val.id"
            @click="localitem(val.name)"
            >
                <img :src="val.url" alt="">
                <p>{{val.name}}</p>
                <span>{{val.price | money}}</span>
            </div>

        </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: function () {
                return {
                    goods: [{
                            id: 1,
                            name: "音响",
                            price: 2444,
                            url: './img/OIP-C (1).jpg'
                        },
                        {
                            id: 2,
                            name: "手表",
                            price: 22,
                            url: './img/OIP-C (2).jpg'
                        },
                        {
                            id: 3,
                            name: "刮胡刀",
                            price: 500,
                            url: './img/OIP-C (3).jpg'
                        },
                        {
                            id: 4,
                            name: "小米上新",
                            price: 100,
                            url: './img/OIP-C.jpg'
                        },
                        {
                            id: 5,
                            name: "刮胡刀2",
                            price: 300,
                            url: './img/OIP-C (3).jpg'
                        },
                        {
                            id: 6,
                            name: "音响2",
                            price: 400,
                            url: './img/OIP-C (1).jpg'
                        }
                    ],
                    localid:""
                }
            },
            methods:{
                itemid(id){
                    this.localid=id;
                }
            },
            // 商品
            components: {
                sgitem: {
                    template: "#sp",
                    props: ['goods'],
                    data() {
                        return {
                           lk:null
                        }
                    },
                    mounted() {
                        this.lk=this.goods
                        console.log(this.goods)
                    },
                    methods: {
                        localitem(i){
                            console.log(i);
                          this.$emit('itemid',i)
                        }
                    },
                    filters:{
                        money(val){
                            return "￥"+ val.toFixed(2)
                        }
                    }
                },




            }

        });
    </script>
</body>

</html>